<template>
	<view class="container">
		<top-back-navbar position="fixed" title="在线充值" background="#7155F8" color="#ffff"></top-back-navbar>
		<!-- 新生支付 -->
		<view class="item_box">
			<view class="title">
				新生支付
			</view>
			<view class="qianyue">
				<view class="left">
					新生支付签约
				</view>
				<view class="right">
					<view class="button" @click="to_qianyue()" v-if="error_code !=0">
						未签约
					</view>
					<view class="button_red" v-if="error_code==0" @click="quxiaoqianyue()">
						解除签约
					</view>
				</view>
			</view>
			<view class="qianyueyaoshu">
				签约要素：卡号+姓名+证件号码+手机号
			</view>
			<view class="no_cart">
				<view class="left">
					不支持农业银行
				</view>
				<view class="right">
					<view class="button"
						@click="go_word_page('/pages/member/zfbPay/fujian_lt?e=http://newappadmin.zhongzihuacai.com/xy/xs.png')">
						充值附表
					</view>
					<view class="button" @click="go_word_page('/pages/member/zfbPay/shuoming')">
						充值说明
					</view>
				</view>
			</view>
			<view class="chongzhi">
				<view class="left">
					<input type="text" v-model="parice_xs" class="input" value="" placeholder="请输入充值金额" />
				</view>
				<view class="button" @click="chongzhi(pay_value='xs')">
						
				</view>
			</view>
		</view>

		<!-- 首信 -->
		<view class="item_box">
			<view class="title">
				首信支付
			</view>
			<view class="no_cart">
				<view class="left">
					可支持信用卡
				</view>
				<view class="right">
					<view class="button"
						@click="go_word_page('/pages/member/zfbPay/fujian?e=http://newappadmin.zhongzihuacai.com/xy/sx.png')">
						充值附表
					</view>
					<view class="button" @click="go_word_page('/pages/member/zfbPay/shuoming')">
						充值说明
					</view>
				</view>
			</view>
			<view class="qianyueyaoshu">
				签约要素：卡号+姓名+证件号码+手机号
			</view>
			<view class="no_cart">
				<view class="left">
					不支持农行,招商,兴业,华夏银行
				</view>

			</view>
			<view class="chongzhi">
				<view class="left">
					<input type="text" v-model="parice_sx" class="input" value="" placeholder="请输入充值金额" />
				</view>
				<view class="button" @click="chongzhi(pay_value='sx')">
					
				</view>
			</view>
		</view>

		<!-- 联通 -->
	<!-- 	<view class="item_box" v-if="h5_app_show">
			<view class="title">
				联通支付
			</view>
			<view class="qianyueyaoshu">
				签约要素：卡号+姓名+证件号码+手机号
			</view>
			<view class="no_cart">
				<view class="left">
					可支持信用卡
				</view>
				<view class="right">
					<view class="button"
						@click="go_word_page('/pages/member/zfbPay/fujian_lt?e=http://newappadmin.zhongzihuacai.com/xy/lt.png')">
						充值附表
					</view>
					<view class="button" @click="go_word_page('/pages/member/zfbPay/shuoming')">
						充值说明
					</view>
				</view>
			</view>


			<view class="chongzhi">
				<view class="left">
					<input type="text" v-model="parice_lt" class="input" value="" placeholder="请输入充值金额" />
				</view>
				<view class="button" @click="chongzhi(pay_value='lt')">

				</view>
			</view>
		</view> -->

		<!-- 银行卡 -->
		<view class="item_box">
			<view class="title">
				银行卡支付
			</view>
			<view class="no_cart">
				<view class="left">
					超过5万以上金额可用
				</view>
				<view class="right" style="justify-content: end;">
					
					<view class="button" @click="go_word_page('/pages/member/zfbPay/shuoming')">
						充值说明
					</view>
				</view>
			</view>
			
			
			<view class="chongzhi">
				<view class="left">
					<input type="text" v-model="parice_yhk" class="input" value="" placeholder="请输入充值金额" />
				</view>
				<view class="button" @click="chongzhi(pay_value='yhk')">
					
				</view>
			</view>
			<view class="qianyueyaoshu">
				请直接转账到以下银行账户
			</view>
			<view class="cart" @click="fuzhi(yhk_data.mybankname)">
				<view class="">
					开户名称:
				</view>
				<view class="mesage">
					{{yhk_data.mybankname}}
				</view>
			</view>
			<view class="cart" @click="fuzhi(yhk_data.bankid)">
				<view class="">
					开户账户:
				</view>
				<view class="mesage">
					{{yhk_data.bankid}}
				</view>
			</view>
			<view class="cart"  @click="fuzhi(yhk_data.bankname)">
				<view class="">
					开户行名:
				</view>
				<view class="mesage">
					{{yhk_data.bankname}}
				</view>
			</view>
			<view class="cart" @click="fuzhi(yhk_data.bankaddress)">
				<view class="">
					开户地址:
				</view>
				<view class="mesage">
					{{yhk_data.bankaddress}}
				</view>
			</view>
			<view class="qianyueyaoshu">
				可点击红色文字复制银行账户信息
			</view>
			<view class="">
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardProsPathselect" limit="1" ref="filePicker" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image">
						<view class="">
							点击上传交易凭证
						</view>
					</uni-file-picker>
				</view>
			</view>
		</view>
		
		
		
		





		<view class="">
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" modeClass="" :title="message" value=""
					placeholder="请输入验证码" @confirm="suer_chongzhi"></uni-popup-dialog>
			</uni-popup>
		</view>
		<view  class="__pay_form__" v-show="false">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				pay_value: 'xs',
				error_code: 1,
				parice_xs: '',
				parice_sx: '',
				parice_lt: '',
				parice_yhk:'',
				yhk_jypz:'',
				scm_id: '',
				message: '',
				input_value: '',
				to_lturl: '',
				yhk_data:{},
				sxyzf: {

				},
				imageStyles: {
					width: '100%',
					height: 150,
				
				},
				h5_app_show:true
			};
		},
		onShow: function() {
			if (uni.getSystemInfoSync().platform === 'android') {
				this.h5_app_show=false
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.get_data()
					this.get_data1()
					this.get_yhkdata()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
	
		},
		methods: {
			fuzhi(value) {
				var value =value
				uni.setClipboardData({
					data: value,
					success: function() {
						uni.showToast({
						
							icon: 'success',
							duration: 1000
						});
					},
					fail: function() {
						uni.showToast({
							
							icon: 'error',
							duration: 1000
						});
					}
				});
			},
			legalIdCardProsPathselect(e) {
				console.log('选择文件：', e)
			
				var filePath = e.tempFilePaths[0]
			
				var _this = this
			
				uni.uploadFile({
					url: this.$BASE_URL + '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
			
					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
			
						var data = JSON.parse(res.data)
			
			
						if (data.error == 0) {
			
							_this.yhk_jypz = data.url
			
			
						} else {
			
			
							_this.yhk_jypz = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							_this.$refs.filePicker.clearFiles();
						}
					},
					fail() {
			
					}
				});
			
			},
			get_data() {

				var openid = this.openid
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.get_xs_signing&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						this.error_code = code
						console.log(data);
						// if (this.error_code != 0) {
						// 	uni.showToast({
						// 		icon: 'none',
						// 		title: data.message
						// 	})
						// }
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_yhkdata(){
				var _this=this
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.bank_info&app=1' ,
				
					success: res => {
						var data = res.data
					
						console.log(data);
						_this.yhk_data=data
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			get_data1() {

				var openid = this.openid
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.get_yi_ruwang&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = res.data.error
						this.sxyzf.error_code = code
						console.log(this.sxyzf.error_code);
						console.log(data);
						this.sxyzf = data
						console.log(this.sxyzf);
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			go_word_page(e) {
			
				var path = e
				uni.navigateTo({
					url: path
				});
			},
			to_qianyue() {
				uni.navigateTo({
					url: '/pages/member/zfbPay/qianyue'
				});
			},
			to_qianyuesxyzf() {
				uni.navigateTo({
					url: '/pages/member/zfbPay/qianyuesx'
				});
			},
			quxiaoqianyue() {
				let _this = this
				uni.showModal({
					title: '温馨提示',
					content: '确定取消签约吗？',
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#628EFE',
					confirmColor: "#628EFE",
					success() {
						_this.sure_quxiaoqianyue()

					}
				})
			},
			sure_quxiaoqianyue() {
				var openid = this.openid
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.xs_termination&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						this.error_code = code
						console.log(data);
						uni.showToast({
							title: data.message,
							icon: 'none',
							duration: 1500,
							position: 'center',

						})
						this.get_data()
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			chongzhi() {
				
				var _this = this
				var openid = this.openid
				var num = this.parice_num
				if (this.pay_value == 'xs') {
					if (this.parice_xs == '') {
						return
					}
					if (this.error_code !=0 ){
						uni.showToast({
							icon:'none',
							title:'你还未短信签约'
						})
						return
					}
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.xs_create_order&app=1&openid=' +
							openid + '&num=' + this.parice_xs,

						success: res => {
							var data = res.data
							var code = data.error
							this.error_code = code

							this.message = data.message
							this.scm_id = data.id
							this.$refs.inputDialog.open()
							this.get_data()
						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
				} else if (this.pay_value == 'sx') {

					if (this.parice_sx == '') {
						return
					}
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.yz_pay_order&app=1&openid=' +
							openid + '&num=' + this.parice_sx,

						success: res => {


							var code = res.data
							if (code.error == 1) {
								uni.showToast({
									icon: 'none',
									title: code.message
								})
							} else {
								if (process.env.UNI_PLATFORM === 'h5') {
									// 在H5环境中打开
									console.log('在H5环境中打开');
									window.location.href = res.data.redirectUrl

								} else if (process.env.UNI_PLATFORM === 'app-plus') {
									// 在App环境中打开
									console.log('在App环境中打开');
									uni.navigateTo({
										url: '/pages/member/zfbPay/shouxin_next?url=' + res.data
											.redirectUrl
									})
								}

							}

						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
				} else if (this.pay_value == 'lt') {

					if (this.parice_lt == '') {
						return
					}
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.lt_pay_order&app=1&openid=' +
							openid + '&num=' + this.parice_lt,

						success: res => {
							var code = res.data
							if (code.error == 1) {
								uni.showToast({
									icon: 'none',
									title: code.message
								})
							} else {
								var value = code.param
								_this.input_value = value
								_this.to_lturl = code.url
								_this.liantongH5(code)
							
							}

						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
				}
				else if (this.pay_value == 'yhk') {
				
					if (this.parice_yhk == '' && this.yhk_jypz == '') {
						return
					}
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.recharge&app=1&openid=' +
							openid + '&money=' + this.parice_yhk +"&pic_url="+this.yhk_jypz,
				
						success: res => {
							var data =res.data
							if(data.error != 0){
								uni.showToast({
									icon:"none",
									title:data.message
								})
							}
							else{
								uni.showToast({
									icon:"none",
									title:data.message
								})
							}
							console.log(res);
				
						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
				}

			},
			liantongH5: function(e) {
		                    var t = "";
		                    e.url && (t = '<input name="param" type="hidden" value=\''.concat(e.param, "' />")),
		                    console.log(t);
		                    var a = '<form action="'.concat(e.url, '" method="post">').concat(t, "</form>");
		                    document.getElementsByClassName("__pay_form__")[0].innerHTML = a,
		                    document.forms[0].submit()
		                },
			suer_chongzhi(value) {

				var openid = this.openid
				var smsCode = value
				var id = this.scm_id
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.xs_pay_order&app=1&openid=' +
						openid + '&smsCode=' + smsCode + '&id=' + id,

					success: res => {
						var data = res.data
						
						
						if(data.error == 0){
							var code = data.error
							this.error_code = code
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position: 'center',
							
							})
							
							this.chaxun_data()
						}
						else{
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position: 'center',
							
							})
							
						}
						

					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			chaxun_data() {
				var openid = this.openid
				var id = this.scm_id
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.xs_pay_success&app=1&openid=' +
						openid + '&id=' + id,

					success: res => {
						var data = res.data
						var code = data.error
						this.error_code = code
						console.log(data);
						if (code != 0) {
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1000,
								position: 'center',

							})
							setTimeout(() => {
								this.chaxun_data()
							}, 2000)

						} else {
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position: 'center',

							})

							this.get_data()
						}

					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		background-size: 100% 100%;
		height: 100%;
	}


	.container {
		height: 100vh;
		width: 100vw;
		background: #fff;
		padding: 10px 26rpx 100px;
		overflow: auto;
	}

	.item_box {
		margin-top: 40rpx;
		width: 100%;
		background-color: #ECF6FC;

		border-radius: 15px;
		padding: 15rpx 25px;
		box-shadow: 0 0 10px #4a4a4a;

		view {
			font-size: 14px;
			font-weight: 500;
		}	
		.cart{
			display: flex;
			.mesage{
				margin-left: 5rpx;
				color:  #C5000B;
			}
		}

		.title {
			font-size: 20px;
			font-weight: 800;
		}

		.qianyue {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.right {
				display: flex;
				width: 50%;
				justify-content: end;

				.button {
					width: 45%;
					background-color: #DBD9D9;
					border-radius: 5px;
					text-align: center;
				}

				.button_red {
					width: 45%;
					background-color: #C5000B;
					border-radius: 5px;
					color: #fff;
					text-align: center;
				}
			}
		}

		.qianyueyaoshu {}

		.no_cart {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.left {
				color: #C5000B;
			}

			.right {
				display: flex;
				width: 50%;
				justify-content: space-between;

				.button {
					width: 45%;
					background-color: #DBD9D9;
					border-radius: 5px;
					text-align: center;
				}

				.button_red {
					width: 45%;
					background-color: #C5000B;
					border-radius: 5px;
					color: #fff;
					text-align: center;
				}
			}
		}

		.chongzhi {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.left {
				width: 65%;
				border-bottom: 1px solid #C0C0C2;
				height: 100rpx;

				.input {
					width: 100%;
					height: 100rpx;
					text-align: center;
				}
			}

			.button {
				width: 35%;
				height: 70rpx;
				background: url('/static/images/home/qianbaochongzhi_sure.png') 0 0 no-repeat;
				background-size: 100% 100%;
				background-color: #7155F8;
				color: #fff;
				text-align: center;
				border-radius: 50px;
				line-height: 70rpx;
			}

		}
	}
</style>